import React, { useState, useEffect } from "react";
import { NumText } from "@/pages/OrderModule/common/components/CommonText";
import styles from "../component/index.module.less";
import CommonZjfImg from "@/views/components/CommonZjfImg";

export default ({}) => {
	const defaultColumns = [
		{
			name: "系统商品名称",
			code: "skuName",
			width: 250,
			render: (text, record) => {
				return (
					<div className={styles.goodsBox}>
						<div className={styles.goodsImg}>
							<img src={record.skuImage} />
						</div>
						<div className={styles.goodsContent}>
							<div className="textOverflowMultiTwo">{record.skuName}</div>
							<div className="textOverflowMultiOne">{record.skuSpec}</div>
							<div>
								<span>商品编码：</span>
								<span>{record.skuCode}</span>
							</div>
							{/* <div>
								<span>价格：</span>
								<span className="common-color9">¥{record.purchasePrice}</span>
							</div> */}
						</div>
					</div>
				);
			}
		},
		{
			name: "供应商",
			code: "supplierName",
			width: 150
		},
		{
			name: "供应商商品名称",
			code: "skuName",
			width: 250,
			render: (text, record, index) => {
				return <div>{goodsNameRender(record, index)}</div>;
			}
		},
		{
			name: "采购总数",
			code: "totalNum",
			width: 100
		},
		{
			name: "入库数",
			code: "receivedNum",
			width: 100,
			render: value => <NumText as="s1" type="success" num={value} />
		},
		{
			name: "缺货数",
			code: "shortageNum",
			width: 100,
			render: value => <NumText as="s1" type="error" num={value} />
		}
	];
	const defaultColumns1 = [
		{
			name: "操作人账户",
			code: "operator"
		},
		{
			name: "操作界面",
			code: "type"
		},
		{
			name: "操作类型",
			code: "subType"
		},
		{
			name: "操作事件",
			code: "action"
			// render: (text, record, index) => {
			// 	if (record.action.includes("生成采购入库单")) {
			// 		const regex = /^(.*?)：(\bR\d{6}\b)/;
			// 		const match = record.action.match(regex);
			// 		if (match) {
			// 			return (
			// 				<div>
			// 					<span>{match[1]}：</span>
			// 					<span style={{ color: "rgba(0, 104, 255, 1)" }}>{match[2]}</span>
			// 				</div>
			// 			);
			// 		}
			// 	} else {
			// 		return <div>{record.action}</div>;
			// 	}
			// }
		},
		{
			name: "操作时间",
			code: "createTime"
		}
	];
	//供应商商品名称的渲染
	const goodsNameRender = (record, index) => {
		return (
			<div className={styles.goodsBox}>
				<div className={styles.goodsImg}>
					<CommonZjfImg img={record.supplierSkuImage} storeId={record.supplierId} />
				</div>
				<div className={styles.goodsContent}>
					<div className="textOverflowMultiTwo">{record.supplierSkuName}</div>
					<div className="textOverflowMultiOne">{record.supplierSkuSpec}</div>
					<div>
						<span>商品编码：</span>
						<span>{record.supplierSkuCode}</span>
					</div>
					{/* <div>
						<span>价格：</span>
						<span className="common-color9">¥{record.supplierSkuPrice}</span>
					</div> */}
				</div>
			</div>
		);
	};
	return { defaultColumns, defaultColumns1 };
};
